<!--
* @description 单位选择器
* @author zywu
* @date 2021/03/16 20:49:19
!-->
<template>
  <div class="unit-picker">
    <pop-button v-if="showButton" :showIcon="showIcon" :is-active="!!currentOrg.shortName" :is-open="active" :text="textShow" @click.native="handleClick"></pop-button>
    <van-popup @close="onClose" v-model="active" round position="bottom" :style="{ height:'90%' }">
      <div class="unit-picker__inner d-flex" :class="{ 'without-visited':myUnitRecords.length==0 }">
        <div class="unit-picker__header">
          <div class="unit-picker__title d-flex">最近访问单位</div>
          <div class="unit-picker__record">
            <van-tag
              v-for="(item) in myUnitRecords"
              :key="item.organizationId"
              :class="{ 'is-selected':currentOrg.shortName==item.shortName }"
              @click="onSelect(item)"
            >{{item.shortName}}</van-tag>
          </div>
          <div class="unit-picker__subtitle">
            <span>全部单位</span>
          </div>
        </div>
        <div class="unit-picker__indexbar" :class="{ 'hide-index':dataList.length<=20 }">
          <van-index-bar :sticky="false" :index-list="indexList">
            <div v-for="(item,i) in dataList" :key="item.organizationId">
              <van-index-anchor v-if="anchors[i]" :index="anchors[i]" />
              <van-cell :title="item.shortName" @click="onSelect(item)" />
            </div>
          </van-index-bar>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import PopButton from '@/components/PopButton'
import { getUcttuListByParams } from '@/api/org'
import { mapState, mapMutations } from 'vuex'
const pinyin = require('pinyin')
const pinyinParam = {
  style: pinyin.STYLE_NORMAL, // 设置拼音风格
  heteronym: false,
}
window.pinyin = pinyin

export default {
  props: {
    options: Array,
    text: {
      type: String,
      default: '单位',
    },
    showSelected: {
      type: Boolean,
      default: true,
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    otheractive: {
      type: Boolean,
      default: false,
    },
    currentOrgprops: {
      type: Object,
      default: function(){
        return {}
      },
    },
    showButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      active: false,
      dataList: [],
      selected: '',
      currentOrg: {},
      headerHeight: 50,
      anchors: {},
      indexList: [],
      myUnitRecords: [],
    }
  },

  components: { PopButton },

  computed: {
    ...mapState(['platformCode', 'userInfo', 'appKeyObj', 'unitRecords']),
    textShow() {
      return this.showSelected && this.currentOrg.shortName
        ? this.currentOrg.shortName
        : this.text
    },
  },
watch: {
  currentOrgprops(value) {
    this.currentOrg = value
  },
 otheractive(value) {
   this.active = value
 }
},
  created() {
    this.myUnitRecords = this.unitRecords[this.userInfo.id] || []
    this.init()
  },

  methods: {
    ...mapMutations(['setUnitRecords']),
    init() {
      getUcttuListByParams({
        userName: this.userInfo.accountName,
        deviceId: this.appKeyObj.deviceId,
        orgIds: this.userInfo.organizationIds,
        areaId: 0,
        name: '',
        provinceId: 0,
        queryType: 0,
        pageIndex: 0,
        pageSize: 1000,
      }).then((res) => {
        this.dataList = res.data
          .map((n, i) => {
            n.firstPinyin = n.shortName==""?'':pinyin(n.shortName.substr(0, 1), pinyinParam)[0][0]
              .substr(0, 1)
              .toUpperCase()
            return n
          })
          .sort(this.pinyinSort)
          .map((n, i) => {
            if (this.indexList.indexOf(n.firstPinyin) < 0) {
              this.anchors[i.toString()] = n.firstPinyin
              this.indexList.push(n.firstPinyin)
            }
            return n
          })
      })
    },
    pinyinSort(a, b) {
      if (a.firstPinyin < b.firstPinyin) return -1
      if (a.firstPinyin > b.firstPinyin) return 1
      return 0
    },
    onClose() {
      this.active = false
      this.$emit('onClose', '')
    },
    onSelect(item) {
      this.active = false
      if (item.shortName == this.currentOrg.shortName) {
        this.currentOrg = {}
        this.$emit('change', '')
        return
      }
      this.currentOrg = item

      let records = this.unitRecords
      records[this.userInfo.id] = [
        { organizationId: item.organizationId, shortName: item.shortName },
      ].concat(
        this.myUnitRecords
          .filter((n) => {
            return n.organizationId != item.organizationId
          })
          .splice(0, 5)
      )
      this.setUnitRecords(records)
      this.$emit('change', item)
      this.myUnitRecords = this.unitRecords[this.userInfo.id] || []
    },
    handleClick() {
      this.active = !this.active
    },
  },
}
</script>
<style lang='scss'>
@import '../styles/variables.scss';
.unit-picker {
  .van-popup {
    overflow: hidden;
  }
  &__inner {
    flex-direction: column;
    height: 100%;
    &.without-visited {
      .unit-picker {
        &__title,
        &__record {
          display: none;
        }
      }
    }
  }
  &__header {
    padding: 0 $padding-side;
  }
  &__title,
  &__subtitle {
    padding: 16px 0;
    font-size: 16px;
    color: #000;
  }
  &__record {
    position: relative;
    padding-bottom: 16px;
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: #e1e1e1;
      transform: scaleY(0.5);
    }
  }
  &__indexbar {
    flex: 1;
    overflow-y: auto;
    &.hide-index {
      .van-index-bar__sidebar {
        display: none;
      }
    }
  }
  .van-index-bar__sidebar {
    top: 55%;
  }
  .van-index-anchor {
    height: 1px;
    overflow: hidden;
  }
  .van-tag {
    margin: 0 5px 5px 0;
    background: rgba(0, 0, 0, 0.12);
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    &.is-selected {
      color: #fff;
      background-color: $color-theme;
    }
  }
}
</style>